<template>
  <div id="app">
    <div class="common-layout">
      <el-container>
        <el-header class="head">博看专区销售合同信息详情</el-header>
        <el-main>
          <div class="main-top">
            <span class="btl">合同信息详情</span>
            <span class="btr">注：带有“*”必填项</span>
          </div>
          <div class="section">
            <div class="secb">
                <span>合同名称：</span> <span>博看专区销售合同</span>
            </div>
            <div class="secb">
                <span>机构名称：</span>  <a href="#">南阳医学高等专科学校图书馆</a>
            </div>
            <div class="secb">
                <span>购买产品类别：</span>  <span>博看专区</span>
            </div>
            <div class="secb">
                <span>服务方式：</span>  <span>远程</span>
            </div>
            <div class="secb">
                <span>资源范围：</span>  <span>全库    期刊、报纸、图书</span>
            </div>
            <div class="secb">
                <span>合同性质：</span>  <span>新增</span>
            </div>
            <div class="secb">
                <span>合同类型：</span>  <span>销售</span>
            </div>
            <div class="secb">
                <span>合同经办人：</span>  <span>夏小芳</span>
            </div>
            <div class="secb">
                <span>合同联系人：</span>  <a href="#">周青玲</a>
            </div>
            <div class="secb">
                <span>合同总金额：</span>  <span>20000.00</span>元
            </div>
            <div class="secb">
                <span>付款方式：</span>  <span>一次性付款   2015年9月11日前支付</span>
            </div>
            <div class="secb">
                <span>签约日期：</span>  <span>2009-11-04</span>
            </div>
            <div class="secb">
                <span>合同期限：</span>  <span>2009-11-04 至 2016-11-04</span>
            </div>
            <div class="secb">
                <span>负责代理：</span>  
            </div>
          </div>
           <div class="main-top">
            <span class="btl">合同相关信息</span>
          </div>
          <div class="section">
             <div class="secb">
                <span>博看签字人：</span>  <span>夏小芳</span>
            </div>
             <div class="secb">
                <span>博看盖章签字：</span>  <span>武汉鼎森电子科技有限公司</span>
            </div>
             <div class="secb">
                <span>机构签字人：</span>  <span>周青玲</span>
            </div>
             <div class="secb">
                <span>机构盖章签字：</span>  <span>南阳医学高等专科学校图书馆</span>
            </div>
             <div class="secb">
                <span>备注：</span>  <span>重点客户对象，跟踪服务他们！</span>
            </div>
             <div class="secb">
                <span>合同扫描件：</span>  
            </div>
             <div class="secb">
                <span>审核状态：</span>  <span>已审核</span>
            </div>
             <div class="secb">
                <span>合同到期提醒：</span>  <span>开启</span>
            </div>
            <el-row class="mb-4">
            <el-button type="info">关闭</el-button>
          </el-row>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.head {
  text-align: center;
  font-weight: bolder;
}
.main-top {
  height: 40px;
  display: flex;
  font-size: 15px;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid gainsboro;
  /* background-color: aqua; */
}

.btl {
  font-weight: bold;
}
.btr {
  color: gray;
}
.section{
    min-height: 500px;
    /* background-color: aqua; */
}
.secb{
    height: 35px;
    display: flex;
    align-items: center;
    margin: 8px 0;
    /* background-color: chartreuse; */
}
a{
  text-decoration: none;
}
.mb-4 {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: aqua; */
}
</style>
